'use client'

import React from 'react'
import { Box, Typography } from '@mui/material'
import { authClient } from '@/app/api/auth/[...all]/authClient'

export default function ClientSideAuth() {
  const [secretData, setSecretData] = React.useState(undefined)
  const { data: session, error } = authClient.useSession()
  React.useEffect(() => {
    // if you have SWR installed for fetching, rather use that instead of the default fetch api in this case
    const fetchData = async () => {
      const res = await fetch('/api/restrictedRoute', {
        cache: 'no-cache',
        method: 'GET',
      })
      const sessionData = await res.json()
      setSecretData(sessionData.content ? sessionData.content : sessionData.error)
    }

    fetchData()
  }, [])

  return (
    <Box>
      <Typography variant={'body1'} sx={{ maxWidth: 350, textAlign: 'center' }}>
        {secretData}
      </Typography>
      {!error && session && session.user && (
        <Typography variant={'body1'} sx={{ maxWidth: 350, textAlign: 'center' }}>
          {session?.user?.name}
        </Typography>
      )}
    </Box>
  )
}